<template>
  <div class="particular">
    <div class="particular-img">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="imgList in imgLists">
            <img :src="$root.domain + imgList.imgUrl" />
          </div>
        </div>
        <div class="swiper-pagination" style="width:100%;left:0;bottom:5px;"></div>
      </div>
    </div>
    <div class="product">
      <div class="title">{{ detail.goodsName }}</div>
      <div class="shopping">
        <span class="money">￥{{ detail.goodsPrice/100 | currency ""  }}元</span>
        <span class="money">/{{ detail.goodsUnits }}</span>
        <span class="welfare">{{ detail.goodsDescribe }}</span>
      </div>
    </div>

    <div class="explain">
      <div class="explain-ct">
        <ul class="tab-box">
            <li v-for="tab in tabs" :class="{'main-color-border': tabName === tab.en}"
            @touchEnd="clickTab(tab.en)">
              <span>{{tab.cn}}</span>
            </li>
        </ul>
      </div>
    </div>
    <div class="bg"></div>
    <div class="product-explain" v-show="tabName === 'info'" v-html="detail.explain">
    </div>

    <div class="product-argument" v-show="tabName === 'dynamic'">
      <div class="">
        <div class="list">
          <span class="list-left">商品名称：</span>
          <span class="list-right">{{ detail.goodsName }}</span>
        </div>
        <div class="list">
          <span class="list-left">型号：</span>
          <span class="list-right">{{ detail.goodsModel }}</span>
        </div>
        <div class="list">
          <span class="list-left">商品毛重：</span>
          <span class="list-right">{{ detail.goodsWeight }}g</span>
        </div>
        <div class="list">
          <span class="list-left">商品产地：</span>
          <span class="list-right">{{ detail.goodsProducer }}</span>
        </div>
        <div class="list">
          <span class="list-left">功能：</span>
          <span class="list-right">{{ detail.goodsFunc }}</span>
        </div>
        <div class="list">
          <span class="list-left">生产日期：</span>
          <span class="list-right">{{ detail.goodsProTime }}</span>
        </div>
      </div>
    </div>
  </div>

  <div class="bg-lucency" @click="bgLucencyOff" v-show="bgLucencyShow"></div>

  <div class="buy-select" v-if="buySelectShow">
    <div class="select-title">
      <div class="titleImg">
        <img :src="$root.domain + productsImg"/>
      </div>
      <div class="titleFont">
        <span>￥{{ curPrice/100 + detail.goodsPrice/100 | currency ""  }}/{{ detail.goodsUnits }}</span>
        <p class="fontStyle">型号：{{ detail.goodsModel }}</p>
        <img src="../images/icon_no.png" @click="onlyClose" />
      </div>
    </div>
    <div class="title-money">
      <span :class="{'active': product.active}" v-for="product in products" @click="chooseModels($index)">
      官方标配{{ product.goodsName ? '+' : '' }}{{ product.goodsName }}
      </span>
    </div>
  </div>


  <div class="payment" @click="paying">
    <div class="payment-bt">
      <button type="button"><span>立即购买</span></button>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import Swiper from "swiper";
  import {AJAX} from "../methods/query.js";
  import "../styles/swiper.min.css";
  export default {
    data() {
      return {
        id: this.$route.query.id,
        loading: false,
        dialog: false,
        explainShow: false,
        buySelectShow: false,
        bgLucencyShow: false,
        imgLists: [],
        products: [],
        combo: "",
        productsImg: "",
        detail: {},
        tabName: '',
        tabs: [{
          en: 'info',
          cn: '产品详情'
        }, {
          en: 'dynamic',
          cn: '产品参数'
        }],
        curPrice: '',
        curId: "",
        defaultActive: true
      };
    },
    methods: {
      chooseModels(i) {
        this.products.forEach((v, k) => {
          this.products[k].active = false;
        });
        this.curPrice = this.products[i].goodsPrice;
        this.curId = this.products[i].combo;
        this.defaultActive = false;
        this.products[i].active = true;
      },
      clickTab(name) {
        this.tabName = name;
      },
      bgLucencyOff() {
        this.bgLucencyShow = false;
        this.buySelectShow = false;
      },
      paying() {
        this.curPrice = this.products[0].goodsPrice;
        if (this.curId === "") {
          this.curId = this.products[0].combo;
        }
        if (this.buySelectShow === true) {
          this.$route.router.go('/buy-content/?id=' + this.id
          + "&curId=" + this.curId + "&module=" + this.detail.goodsModule);
        } else {
          this.buySelectShow = true;
          this.bgLucencyShow = true;
          this.productsImg = this.imgLists[0].imgUrl;
        }
      },
      onlyClose() {
        this.buySelectShow = false;
        this.bgLucencyShow = false;
      },
      particular(e) {
        let $event = e.target;
        if ($event.classList.contains('blue')) {
          $event.classList.remove('blue');
          this.explainShow = false;
        } else {
          $event.classList.add('blue');
          this.explainShow = true;
        }
      }
    },
    async ready() {
      this.clickTab('info');
      // 查询商品套餐信息
      let _self = this;
      // 查询商品展示图表
      let productsImg = await AJAX.productImg(this.id);
      productsImg.forEach(pro => {
        _self.imgLists.push({
          imgUrl: pro.imgUrl
        });
      });
      let productSetMeal = await AJAX.productSetMeal(this.id);
      _self.products.push({
        goodsName: '',
        goodsSum: 1,
        combo: '',
        goodsPrice: 0,
        active: true
      });
      productSetMeal.forEach(pro => {
        _self.products.push({
          goodsName: pro.goodsName,
          goodsSum: pro.goodsSum,
          combo: pro.id,
          goodsPrice: pro.goodsPrice,
          active: false
        });
      });
      console.info(_self.products);
      // 商品参数查询
      let getGoodsInfo = await AJAX.getGoodsInfo(this.id);
      this.curPrice = getGoodsInfo.goodsPrice;
      this.detail = {
        explain: getGoodsInfo.details, // 详情
        goodsName: getGoodsInfo.goodsName,  // 商品名字
        goodsPrice: getGoodsInfo.goodsPrice, // 单价  （分）
        goodsUnits: getGoodsInfo.goodsUnits, // 单位
        goodsDescribe: getGoodsInfo.goodsDescribe, // 描述
        goodsModule: getGoodsInfo.goodsModule,
        goodsModel: getGoodsInfo.goodsModel, // 型号
        goodsWeight: getGoodsInfo.goodsWeight, // 重量
        goodsProducer: getGoodsInfo.goodsProducer, // 产地
        goodsFunc: getGoodsInfo.goodsFunc, // 功能
        goodsProTime: getGoodsInfo.goodsProTime, // 生产日期
        goodsScales: getGoodsInfo.goodsScales, // 销售量
        goodsSum: getGoodsInfo.goodsSum, // 数量
        goodsFreight: getGoodsInfo.goodsFreight, // 运费
        goodsStatus: getGoodsInfo.goodsStatus // 状态
      };
      this.$nextTick(() => {
        new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: 1500,
          autoplayDisableOnInteraction: false,
          loop: true
        });
      });
    },
    components: {
      Toast,
      Dialog,
      Swiper
    }
  };
</script>
<style lang="less">
  .particular{
    font-size: .6rem;
    color:#404040;
    background-color: #fff;
    .particular-img{
      .swiper-container{
        width: 100%;
        height:7rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .product{
      padding:.3rem .5rem 0 .5rem;
      font-size: .7rem;
      clear: both;
      .shopping{
        line-height: 1.6rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        .money{
          color:#15A2D7;
        }
        .welfare{
          font-size: .5rem;
          color: #BFBFBF;
        }
      }
    }

    .explain{
      .tab-box {
        display: flex;
        border:1px solid #EBEBEB;
        justify-content: space-around;
        li {
          font-size: .7rem;
          text-align: center;
          width: 49.99%;
          border-bottom: 1px solid #EBEBEB;
          padding: .3rem 0;
          span {
            border-right: 1px solid #EBEBEB;
            display: block;
          }
        }
        li:first-child {
          span {
            border-left: 0px none;
          }
        }
        li.main-color-border {
          border-bottom:3px solid #15A1D6;
          color:#404040;
        }
      }
    }

    .bg{
      background-color: #EBEBEB;
      height:.3rem;
    }

    .product-explain{
      padding: .3rem .5rem 10rem .5rem;
      margin-bottom: 4.2rem;
      iframe{
        width:100% !important;
      }
      img{
        max-width: 100%;
        height: auto;
      }
    }

    .product-argument{
      font-size: .6rem;
      padding-bottom: 10rem;
      .list{
        clear: both;
        // overflow: hidden;
        // text-overflow:ellipsis;
        // white-space:nowrap;
        .list-left{
          float:left;
          width: 30%;
          padding-left: .5rem;
        }
        .list-right{
          float: right;
          padding-right: .5rem;
          width: 69%;
          text-align: right;
        }
      }
      .list-state{
        padding: .3rem .3rem .5rem .5rem;
        clear: both;
        img{
          max-width: 100%;
          height: auto;
        }
      }
    }
  }

  .bg-lucency{
    position: fixed;
    background-color: #000;
    width:100%;
    height:100%;
    z-index: 5;
    top:0;
    right: 0;
    opacity: 0.5;
  }

  .buy-select{
    position: fixed;
    z-index: 6;
    width: 100%;
    bottom: 2.8rem;
    background-color: #fff;
    .select-title{
      text-align: left;
      line-height: 1.2rem;
      font-size: .6rem;
      padding:.3rem 0;
      .titleImg{
        width:30%;
        height:4.5rem;
        margin: -1rem .3rem 0 .5rem;
        border-radius: .2rem;
        float:left;
        background-color: #fff;
        img{
          width:100%;
          height:100%;
          padding:.3rem;
        }
      }
      .titleFont{
        float:left;
        width:60%;
        height:4.3rem;
        font-size: .6rem;
        color:#404040;
        .fontStyle{
          overflow : hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        span{
          color:#15A1D6;
        }
        img{
          position: absolute;
          top:.3rem;
          right:.3rem;
          width:1rem;
          height:1rem;
        }
      }
    }
    .title-money{
      padding-top: .5rem;
      margin: 0 .3rem;
      clear: both;
      font-size: .6rem;
      span{
        display: inline-block;
        border:1px solid #15A1D6;
        border-radius: .3rem;
        margin-left: .5rem;
        margin-bottom: .5rem;
        padding:.3rem .5rem;
        color:#15A1D6;
        &.active {
          background: #15A1D6;
          color: #fff;
        }
      }
    }
  }

  .payment{
    position: fixed;
    z-index: 7;
    bottom: 0;
    width:100%;
    height:3rem;
    background-color: #fff;
    .payment-bt button{
      position: fixed;
      bottom: 0;
      padding: .5rem 0;
      width:90%;
      margin-left:5%;
      margin-bottom: .5rem;
      border-radius: .3rem;
      background-color: #15A1D6;
      text-align: center;
      color:#fff;
    }
  }
</style>
